<script setup lang="ts">
import { computed } from "vue";
import { isClient } from "@vueuse/core";
import { useLang } from "../composables/lang";
import localeData from "../i18n/pages/not-found.json";

const lang = useLang();

const locale = computed(() => localeData[lang.value]);

const goHome = () => {
  if (!isClient) return;
  window.location.href = `/${lang.value}/`;
};
</script>

<template>
  <div :title="locale.title">
    <span @click="goHome">{{ locale["button-title"] }}</span>
    <p>{{ locale.desc }}</p>
  </div>
</template>

<style scoped>
.el-result {
  height: 100vh;
  width: 100vw;
}
</style>
